@forward "element-plus/theme-chalk/src/common/var.scss" with (
  //  node_modules/element-plus/theme-chalk/src/common/var.scss"
  $border-radius: ("base": 6px, "small": 12px, "round": 20px, "circle": 100%),
  $loading: ("spinner-size": 2.4rem, "fullscreen-spinner-size": 2.6rem),
  $colors: (
    "white": #ffffffe1,
    "black": #131313,
    "main": #3583fd,
    "primary": (
      "base": #3583fd,
      "tip": #dc284d,
      "tip2": #fdae2f,
      "tip3": #00e9ce
    ),
    "success": (
      "base": #56c220
    ),
    "warning": (
      "base": #fdae2f
    ),
    "danger": (
      "base": #ff5644
    ),
    "error": (
      "base": #f12323
    ),
    "info": (
      "base": #11e08a
    )
  ),

  $bg-color: ("black": #111111, "primary": #303133),
  $text-color: (
    "primary": #303133,
    "regular": #606266,
    "secondary": #909399,
    "placeholder": #a8abb2,
    "disabled": #c0c4cc
  ),

  $popper: (
    // 'bg-color': getCssVar('bg-color', 'overlay'),
    // 'font-size': getCssVar('font-size-base'),
    // 'border-color': getCssVar('border-color-lighter'),
    // 'padding': 12px,
    // 'padding-large': 18px 20px,
    // 'title-font-size': 16px,
    // 'title-text-color': getCssVar('text-color-primary'),
    "border-radius": 0.5em,
  ),
  // $drawer
  $drawer: ("padding-primary": 0px),
  //
  $carousel:
    (
      "arrow-font-size": 20px,
      "arrow-size": 36px,
      "arrow-background": rgba(31, 45, 61, 0.4),
      "arrow-hover-background": rgba(31, 45, 61, 0.4),
      "indicator-width": 30px,
      "indicator-height": 2px,
      "indicator-padding-horizontal": 4px,
      "indicator-padding-vertical": 12px,
      "indicator-out-color": getCssVar("border-color-hover")
    ),
  // el-card
  $card:
    (
      "border-color": getCssVar("border-color", "light"),
      "border-radius": 4px,
      "padding": 2px,
      "bg-color": getCssVar("fill-color", "blank")
    ),
  // message
  $message:
    (
      "bg-color": getCssVar("color", "info", "light-9"),
      "border-color": getCssVar("border-color-lighter"),
      "padding": 0.5rem 0.8rem,
      "close-size": 1rem,
      "close-icon-color": getCssVar("text-color-placeholder"),
      "close-hover-color": getCssVar("text-color-secondary")
    ),
  $messagebox: (
    "title-color": getCssVar("text-color-primary"),
    "width": 300px,
    "border-radius": 8px,
    "close-size": 1rem,
    "font-size": getCssVar("font-size-base"),
    "content-font-size": getCssVar("font-size-base"),
    "content-color": getCssVar("text-color-regular"),
    "error-font-size": 14px,
    "padding-primary": 0.8rem
  ),
  $checkbox: ("font-size": 1em, "input-height": 1em, "input-width": 1em, "border-radius": 4px),
  $radio: ("font-size": 1em, "input-height": 1em, "input-width": 1em, "input-border-radius": 4px),
  $menu: (
    "active-color": getCssVar("color-primary"),
    "text-color": getCssVar("text-color-primary"),
    "hover-text-color": getCssVar("color-primary"),
    "bg-color": getCssVar("fill-color", "blank"),
    "hover-bg-color": getCssVar("color-primary-light-9"),
    "item-height": 2.6rem,
    "sub-item-height": calc(#{getCssVar("menu-item-height")} - 0.5rem),
    "horizontal-sub-item-height": 2.6rem,
    "item-font-size": 0.875rem,
    "item-hover-fill": getCssVar("color-primary-light-9"),
    "border-color": getCssVar("border-color"),
    "base-level-padding": 0.875rem,
    "level-padding": 0.875rem,
    "icon-width": 1.2rem
  ),
  
  // 表格
  $table:
    (
      // "border": 1px solid getCssVar("table-border-color"),
      // "border-color": getCssVar("border-color-lighter"),
      // "text-color": getCssVar("text-color-default"),
      // "current-row-bg-color": getCssVar("color-primary-light-9"),
      // "fixed-box-shadow": getCssVar("box-shadow", "light"),
      // "header-text-color": #fff,
      // "header-bg-color": var(--el-color-),
      // "bg-color": transparent,
      // "row-hover-bg-color":#7a7a7a18,
      // "tr-bg-color": transparent,
      "expanded-cell-bg-color": #c5c5c51e,
      // "fixed-left-column": inset 4px 0 4px -4px rgb(0 0 0 / 15%),
      // "fixed-right-column": inset -4px 0 4px -4px rgb(0 0 0 / 15%)
    ),
  $table-font-size: (
    "large": getCssVar("font-size", "base"),
    "default": 14px,
    "small": 12px
  ),

  $table-padding: (
    "large": 12px 0,
    "default": 0 0,
    "small": 4px 0
  ),

  $table-cell-padding: (
    "large": 0 16px,
    "default": 0 12px,
    "small": 0 8px
  ),
  $pagination:  (
    'font-size': 14px,
    'bg-color': getCssVar('fill-color', 'blank'),
    'text-color': getCssVar('text-color-primary'),
    'border-radius': 4px,
    'button-color': getCssVar('text-color-primary'),
    'button-width': 1.8rem,
    'button-height': 1.8rem,
    'button-disabled-color': getCssVar('text-color-placeholder'),
    'button-disabled-bg-color': getCssVar('fill-color', 'blank'),
    'button-bg-color': getCssVar('fill-color'),
    'hover-color': getCssVar('color-primary'),
    'font-size-small': 12px,
    'button-width-small': 1.5rem,
    'button-height-small': 1.5rem,
    'button-width-large': 2.6rem,
    'button-height-large': 2.6rem,
    'item-gap': 1rem,
  )
);
